<template>
  <div>
    <div class="clearfix content-top">
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="dialogShow()">添加顶级菜单</el-button>
    </div>
     <!-- 树菜单 -->
    <div class="block bg-white" :style="pageStyle">
      <el-tree :data="dataList" node-key="id" :props="defaultProps" accordion :filter-node-method="filterNode" ref="menuTree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="optionBtn">
            <el-button circle icon="el-icon-plus" size="mini" type="success" @click="dialogShow(node,data,'insert')"></el-button>
            <el-button circle icon="el-icon-delete" size="mini" type="danger" @click="remove(node, data)"></el-button>
          </span>
        </span>
      </el-tree>
    </div>

    <!-- 详情框 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" :close-on-click-modal="false" width="700px">
      <el-form label-position="right" label-width="100px"  :rules="dialog.rules"   :model="dialog.formData" ref="addMenuRef">
          <el-form-item label="父级ID" prop="parentId">
              <el-input v-model="dialog.formData.parentId" disabled></el-input>
          </el-form-item>
          <el-form-item label="菜单名称"  prop="name">
              <el-input v-model="dialog.formData.name"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDialog('addMenuRef')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import qualitySystemApi from 'plugins/axios/qualitySystemApi.js'
import baseApi from 'plugins/axios/baseApi.js'
import {mapState} from 'vuex'
export default {
  data(){
    return {
      dataList:[],
      defaultProps:{
        children: 'children',
        label: 'name',
        id: 'id'
      },
      dialog:{
        title:'',
        isShow:false,
        formData:{},
        rules:{
          name:[{ required: true, message: '请输入新增的菜单名称', trigger: 'blur' }]
        }
      }
    }
  },
  computed:{
    ...mapState({clientHeight:state=>state.common.clientHeight}),
    pageStyle(){
      return {
        'height':(this.clientHeight-150)+'px',
        'overflow-y': 'auto'
      };
    }
  },
  mounted(){
    this.getMenuList();
  },
  methods:{
    getMenuList(){
      let self = this;
      qualitySystemApi.getCxwjMenuList().then(res=>{
        var findObj = function(arr){
          return arr.filter(item=>{
            if(item.children.length>0){
              item.children=findObj(item.children);
            }
            return item.srcType ===1
          })
        }
        self.dataList = findObj(res.content);
      })
      
    },
    dialogShow(node,data,type){
      let self = this;
      self.dialog.isShow = true;
      self.dialog.title="新增程序文件菜单" ;
      self.dialog.formData={
        name:null,
        parentId:type? data.id : 167
      };
    },
    remove(node,data){
      let self = this;
      this.$confirm('是否删除程序文件此菜单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          qualitySystemApi.deleteCxwjMenu(data.id).then(res=>{
            self.$message.success('删除成功!');
            self.getMenuList();
            self.$store.dispatch('changeMenuListAction')
          })
          
        }).catch(() => {});
    },
    filterNode(value, data){
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    submitDialog(formName){
      let self = this;
      let postData = JSON.parse(JSON.stringify(self.dialog.formData))
      self.$refs[formName].validate((valid) => {
          if (valid) {
           qualitySystemApi.insertCxwjMenu(postData).then(res=>{
             self.$message.success(`${self.dialog.title}成功`);
             self.dialog.isShow= false;
             self.getMenuList();
             self.$store.dispatch('changeMenuListAction')
           })
          }
        });
    }
  }
}
</script>
<style lang="stylus" scoped>
.content-top
  margin-bottom 16px
.custom-tree-node
  flex 1
  font-size 14px
  padding-right 8px
  >span:first-child
    margin 0 40px 0 0
  >span:nth-child(2)
    display none
  &:hover>span:nth-child(2)
    display inline-block
</style>